<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
</head>

<body>
    <div class="root">
        姓：<input type="text" v-model="surname">
        <br>
        名：<input type="text" v-model="name">
        <br>

        <!-- {{}}应该写在标签内，且括号内为，表达式,模板中的表达式要尽可能简单 -->
        姓名：<span>{{fullname}}</span>
    </div>

    <script>

        Vue.config.productionTip = false
        const vm = new Vue({
            el: '.root',
            data: {
                surname: '张',
                name: '三',
            },
            computed: {
                // fullname: {
                // 完整写法，含get和set
                // get() {
                //     return this.surname + '-' + this.name
                // },
                // set() {                      
                //     const arr = value.split('-')
                //     this.firstName = arr[0]
                //     this.lastName = arr[1]
                // }
                // }

                //简写，只存在get，只能读取，不考虑修改                  
                function() {
                    return this.surname + '-' + this.name
                }
            }
        })
    </script>
</body>

</html>